<php>$siteConfig = C('siteConfig');</php>
<css href="/Public/assets/clock//assets/css/style.css" />
<style>
     :root {
        --blue-1: #e6f7ff;
        --blue-2: #bae7ff;
        --blue-3: #91d5ff;
        --blue-4: #69c0ff;
        --blue-5: #40a9ff;
        --blue-6: #1890ff;
        --blue-7: #096dd9;
        --blue-8: #0050b3;
        --blue-9: #003a8c;
        --blue-10: #002766;
        --purple-1: #f9f0ff;
        --purple-2: #efdbff;
        --purple-3: #d3adf7;
        --purple-4: #b37feb;
        --purple-5: #9254de;
        --purple-6: #722ed1;
        --purple-7: #531dab;
        --purple-8: #391085;
        --purple-9: #22075e;
        --purple-10: #120338;
        --cyan-1: #e6fffb;
        --cyan-2: #b5f5ec;
        --cyan-3: #87e8de;
        --cyan-4: #5cdbd3;
        --cyan-5: #36cfc9;
        --cyan-6: #13c2c2;
        --cyan-7: #08979c;
        --cyan-8: #006d75;
        --cyan-9: #00474f;
        --cyan-10: #002329;
        --green-1: #f6ffed;
        --green-2: #d9f7be;
        --green-3: #b7eb8f;
        --green-4: #95de64;
        --green-5: #73d13d;
        --green-6: #52c41a;
        --green-7: #389e0d;
        --green-8: #237804;
        --green-9: #135200;
        --green-10: #092b00;
        --pink-1: #fff0f6;
        --pink-2: #ffd6e7;
        --pink-3: #ffadd2;
        --pink-4: #ff85c0;
        --pink-5: #f759ab;
        --pink-6: #eb2f96;
        --pink-7: #c41d7f;
        --pink-8: #9e1068;
        --pink-9: #780650;
        --pink-10: #520339;
        --red-1: #fff1f0;
        --red-2: #ffccc7;
        --red-3: #ffa39e;
        --red-4: #ff7875;
        --red-5: #ff4d4f;
        --red-6: #f5222d;
        --red-7: #cf1322;
        --red-8: #a8071a;
        --red-9: #820014;
        --red-10: #5c0011;
        --orange-1: #fff7e6;
        --orange-2: #ffe7ba;
        --orange-3: #ffd591;
        --orange-4: #ffc069;
        --orange-5: #ffa940;
        --orange-6: #fa8c16;
        --orange-7: #d46b08;
        --orange-8: #ad4e00;
        --orange-9: #873800;
        --orange-10: #612500;
        --gold-1: #fffbe6;
        --gold-2: #fff1b8;
        --gold-3: #ffe58f;
        --gold-4: #ffd666;
        --gold-5: #ffc53d;
        --gold-6: #faad14;
        --gold-7: #d48806;
        --gold-8: #ad6800;
        --gold-9: #874d00;
        --gold-10: #613400;
        --primary-1: var(--blue-1);
        --primary-2: var(--blue-2);
        --primary-3: var(--blue-3);
        --primary-4: var(--blue-4);
        --primary-5: var(--blue-5);
        --primary-6: var(--blue-6);
        --primary-7: var(--blue-7);
        --primary-8: var(--blue-8);
        --primary-9: var(--blue-9);
        --primary-10: var(--blue-10);
        --primary-color: var(--primary-6);
        --primary-color-hover: var(--primary-5);
        --primary-color-active: var(--primary-7);
        --primary-color-outline: var(--primary-2);
        --info-color: var(--primary-color);
        --success-color: var(--green-6);
        --success-color-hover: var(--green-5);
        --success-color-active: var(--green-7);
        --success-color-outline: var(--green-2);
        --warning-color: var(--gold-6);
        --warning-color-hover: var(--gold-5);
        --warning-color-active: var(--gold-7);
        --warning-color-outline: var(--gold-2);
        --error-color: var(--red-5);
        --error-color-hover: var(--red-4);
        --error-color-active: var(--red-7);
        --error-color-outline: var(--red-2);
        --highlight-color: var(--red-5);
        --processing-color: var(--blue-6);
        --body-background: #fff;
        --component-background: #fff;
        --popover-background: var(--component-background);
        --popover-customize-border-color: var(--border-color-split);
        --text-color: rgba(0, 0, 0, .85);
        --text-color-secondary: rgba(0, 0, 0, .45);
        --text-color-inverse: #fff;
        --icon-color-hover: rgba(0, 0, 0, .75);
        --heading-color: rgba(0, 0, 0, .85);
        --item-hover-bg: #f5f5f5;
        --border-color-base: #d9d9d9;
        --border-color-split: #f0f0f0;
        --background-color-light: #fafafa;
        --background-color-base: #f5f5f5;
        --disabled-color: rgba(0, 0, 0, .25);
        --disabled-bg: var(--background-color-base);
        --disabled-color-dark: rgba(255, 255, 255, .35);
        --shadow-color: rgba(0, 0, 0, .15);
        --shadow-color-inverse: var(--component-background);
        --box-shadow-base: var(--shadow-2);
        --shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, .08), 0 -9px 28px 0 rgba(0, 0, 0, .05), 0 -12px 48px 16px rgba(0, 0, 0, .03);
        --shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03);
        --shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, .08), -9px 0 28px 0 rgba(0, 0, 0, .05), -12px 0 48px 16px rgba(0, 0, 0, .03);
        --shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, .08), 9px 0 28px 0 rgba(0, 0, 0, .05), 12px 0 48px 16px rgba(0, 0, 0, .03);
        --shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
        --btn-shadow: 0 2px 0 rgba(0, 0, 0, .015);
        --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, .045);
        --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
        --btn-default-bg: var(--component-background);
        --btn-default-ghost-color: var(--component-background);
        --btn-default-ghost-border: var(--component-background);
        --btn-text-hover-bg: rgba(0, 0, 0, .018);
        --btn-text-active-bg: rgba(0, 0, 0, .028);
        --checkbox-check-bg: #fff;
        --descriptions-bg: #fafafa;
        --divider-color: rgba(0, 0, 0, .06);
        --dropdown-menu-submenu-disabled-bg: var(--component-background);
        --radio-dot-disabled-color: rgba(0, 0, 0, .2);
        --radio-solid-checked-color: var(--component-background);
        --radio-disabled-button-checked-bg: #e6e6e6;
        --radio-disabled-button-checked-color: var(--disabled-color);
        --layout-body-background: #f0f2f5;
        --layout-header-background: #001529;
        --layout-trigger-background: #002140;
        --dropdown-menu-bg: var(--component-background);
        --input-placeholder-color: #bfbfbf;
        --input-icon-color: var(--text-color);
        --input-bg: var(--component-background);
        --input-number-handler-active-bg: #f4f4f4;
        --input-icon-hover-color: rgba(0, 0, 0, .85);
        --mentions-dropdown-bg: var(--component-background);
        --select-dropdown-bg: var(--component-background);
        --select-background: var(--component-background);
        --select-clear-background: var(--select-background);
        --select-selection-item-bg: var(--background-color-base);
        --select-selection-item-border-color: var(--border-color-split);
        --select-multiple-disabled-background: var(--disabled-bg);
        --select-multiple-item-disabled-color: #bfbfbf;
        --select-multiple-item-disabled-border-color: var(--border-color-base);
        --cascader-bg: var(--component-background);
        --cascader-menu-bg: var(--component-background);
        --cascader-menu-border-color-split: var(--border-color-split);
        --tooltip-bg: rgba(0, 0, 0, .75);
        --popover-bg: var(--component-background);
        --modal-header-bg: var(--component-background);
        --modal-header-border-color-split: var(--border-color-split);
        --modal-content-bg: var(--component-background);
        --modal-footer-border-color-split: var(--border-color-split);
        --progress-steps-item-bg: #f3f3f3;
        --menu-popup-bg: var(--component-background);
        --menu-dark-bg: var(--layout-header-background);
        --menu-dark-inline-submenu-bg: #000c17;
        --table-header-bg: var(--background-color-light);
        --table-header-sort-bg: var(--background-color-base);
        --table-body-sort-bg: #fafafa;
        --table-row-hover-bg: var(--background-color-light);
        --table-expanded-row-bg: #fbfbfb;
        --table-header-cell-split-color: rgba(0, 0, 0, .06);
        --table-header-sort-active-bg: rgba(0, 0, 0, .04);
        --table-fixed-header-sort-active-bg: #f5f5f5;
        --table-header-filter-active-bg: rgba(0, 0, 0, .04);
        --table-filter-btns-bg: inherit;
        --table-filter-dropdown-bg: var(--component-background);
        --table-expand-icon-bg: var(--component-background);
        --picker-bg: var(--component-background);
        --picker-basic-cell-disabled-bg: var(--disabled-bg);
        --picker-border-color: var(--border-color-split);
        --calendar-bg: var(--component-background);
        --calendar-input-bg: var(--input-bg);
        --calendar-border-color: #fff;
        --calendar-full-bg: var(--calendar-bg);
        --badge-text-color: var(--component-background);
        --rate-star-bg: var(--border-color-split);
        --card-actions-background: var(--component-background);
        --card-skeleton-bg: #cfd8dc;
        --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, .16), 0 3px 6px 0 rgba(0, 0, 0, .12), 0 5px 12px 4px rgba(0, 0, 0, .09);
        --comment-bg: inherit;
        --comment-author-time-color: #ccc;
        --comment-action-hover-color: #595959;
        --back-top-bg: var(--text-color-secondary);
        --back-top-hover-bg: var(--text-color);
        --avatar-bg: #ccc;
        --switch-bg: var(--component-background);
        --pagination-item-bg: var(--component-background);
        --pagination-item-bg-active: var(--component-background);
        --pagination-item-link-bg: var(--component-background);
        --pagination-item-disabled-color-active: #fff;
        --pagination-item-disabled-bg-active: #e6e6e6;
        --pagination-item-input-bg: var(--component-background);
        --page-header-back-color: #000;
        --page-header-ghost-bg: inherit;
        --slider-rail-background-color: var(--background-color-base);
        --slider-rail-background-color-hover: #e1e1e1;
        --slider-dot-border-color: var(--border-color-split);
        --slider-dot-border-color-active: var(--primary-4);
        --tree-bg: var(--component-background);
        --skeleton-to-color: rgba(129, 129, 129, .24);
        --transfer-item-hover-bg: var(--item-hover-bg);
        --message-notice-content-bg: var(--component-background);
        --list-customize-card-bg: var(--component-background);
        --drawer-bg: var(--component-background);
        --timeline-color: var(--border-color-split);
        --timeline-dot-color: var(--primary-color);
        --steps-nav-arrow-color: rgba(0, 0, 0, .25);
        --steps-background: var(--component-background);
        --notification-bg: var(--component-background);
        --image-preview-operation-disabled-color: rgba(255, 255, 255, .45);
        --gradient-min: rgba(207, 216, 220, .2);
        --gradient-max: rgba(207, 216, 220, .4);
        --sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, .08);
        --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .35);
        --header-light-shadow: 0 1px 4px rgba(0, 21, 41, .08);
        --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .1);
        --header-tool-hover-bg: rgba(0, 0, 0, .025);
        --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);
        --logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, .08);
        --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .35);
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .widget {
        padding: 0;
        background: transparent;
        box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
    }
    
    .console-main {
        width: 100%;
        /* margin: 15px; */
    }
    
    .hhq-box {
        background-color: #fff;
        padding: 24px;
    }
    
    .hhq-box-hd {
        font-size: 14px;
        color: #999;
    }
    
    .hhq-box-hd i {
        float: right;
    }
    
    .hhq-box-bd {}
    
    .hhq-avatar {
        width: 68px;
        height: 68px;
        border-radius: 50%;
    }
    
    .hhq-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    
    .hhq-admin-info {
        margin-left: 10px;
    }
    
    .hhq-admin-info h2 {
        color: #333;
        font-size: 18px;
        line-height: 36px;
        font-weight: 500;
        margin-bottom: 5px;
    }
    
    .hhq-admin-info h2 span {
        color: #000;
        font-size: 22px;
        font-weight: 700;
    }
    
    .hhq-admin-info h2 b {
        color: #ffb955;
        padding: 0 2px;
        font-size: 22px;
        font-weight: 700;
    }
    
    .hhq-admin-info p {
        font-size: 16px;
        color: #999;
    }
    
    .site-logo {
        width: 68px;
        height: 68px;
        border-radius: 50%;
    }
    
    .site-logo img {
        width: 68px;
        height: 68px;
        border-radius: 50%;
    }
    
    .site-name {
        line-height: 68px;
        font-size: 40px;
    }
    
    .admin-icon {
        margin: 0 auto;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        border: 1px solid var(--border-color-base);
    }
    
    .ant-tag-blue {
        color: var(--blue-7);
        background: var(--blue-1);
        border-color: var(--blue-3);
    }
    
    .ant-tag-orange {
        color: var(--orange-7);
        background: var(--orange-1);
        border-color: var(--orange-3);
    }
    
    .ant-tag-red {
        color: var(--red-7);
        background: var(--red-1);
        border-color: var(--red-3);
    }
    
    .ant-tag-green {
        color: var(--green-7);
        background: var(--green-1);
        border-color: var(--green-3);
    }
    
    .hhq-box-num {
        text-align: center;
        line-height: 80px;
        font-size: 32px;
        font-weight: 700;
        color: #666;
    }
    
    .hhq-box-text {
        text-align: center;
        margin-bottom: 10px;
    }
</style>

<div class="layui-row console-main">
    <div class="hhq-box layui-clear">
        <div class="hhq-avatar fl">
            <img src="{$_SESSION['loginUser']['avatar'] | default='/Public/common/img/boy1.png'}">
        </div>
        <div class="hhq-admin-info fl">
            <h2>你好，<span>{$_SESSION['loginUser']['realname']}</span>
                <php>echo $_SESSION['loginUser']['role'] == 'admin' ? '管理员' : '用户';</php>，欢迎使用<b>{$siteConfig.name | default='Xiyucode'}</b>后台。</h2>
            <p>开始您一天的工作吧！</p>
        </div>
        <div class="fr">
            <div id="clock" class="light">
                <div class="display">
                    <div class="weekdays"></div>
                    <div class="ampm"></div>
                    <div class="alarm"></div>
                    <div class="digits"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <audio id="alarm-ring" preload>
    <source src="/Public/assets/clock/assets/audio/ticktac.mp3" type="audio/mpeg" />
    <source src="/Public/assets/clock/assets/audio/ticktac.ogg" type="audio/ogg" />
</audio> -->

<script src="/Public/assets/clock/assets/js/moment.min.js"></script>
<script src="/Public/assets/clock/assets/js/script.js"></script>
<script src="/Public/assets/echarts-5.3.2/dist/echarts.js"></script>
<script>
    layui.use(['jquery', 'laytpl'], function() {

        // 千位分隔符
        function divide($this) {
            var num = $this.text();
            num = num.replace(new RegExp('(\\d)(?=(\\d{3})+$)', 'ig'), "$1,");
            $this.text(num);
            $this = '';
        }

    });

    const COLORS = [
        '#002b48',
        '#d62324',
        '#f78002',
        '#fcc148',
        '#003580',
        '#ed2939',
        '#000',
        '#003897',
        '#f93',
        '#bc002d',
        '#024fa2',
        '#000',
        '#00247d',
        '#ef2b2d',
        '#dc143c',
        '#d52b1e',
        '#e30a17',
        '#00247d',
        '#b22234'
    ];
</script>